Helo our Welcome to this lecture in this lecture we are going to be Kree team this structure for our
app using hastier mail.
So this is our blank page here mail.
I have already written the hastier male code for this for this project so I'm going to do.
I'm going to actually copy the code in and then explain each of each line of code step by step.
There'll be a lot easier than you watching me type.
All right.
This is the hastier mail for our project.
So let me explain the code.
So line one here is for first thing you have to indicate in an hastier middle document.
This is the doctype which it tells the web browser that the document you are about to display is an
hastier mail five document.
So that's what one does line two is did begin in where the documents truly starts.
So it begins with a hate mail tag and in between inside the tag pad and an attribute cord Lang basically
that tells a browser what language this is.
So the value is English which how specifying would be when specify an attribute you need to enclose
a value in quotes as I've done here.
So every tag most tags have an opening an enclosed in tags so this is the whole plane.
It's multipack online to the start of the same old document line 22 is the end tag which shows anything
between the hastier month tax is going to be rendered by the web browser.
And his team mail documents what that means.
Line 3 to line 12 is the head tag inside the head tag.
You have various tags the information the head tag is not visible.
You can't see it but the search engine uses that information to display data or to serve a request that
someone's looking for.
So we've got a few member tags here inside the head.
Also notice how higher indented each of the code.
So it tells you that the head and the body are children of a seer male tech.
The Meadow tags are children of the head tag.
The link is a child of the head tag.
And me bring that up a bit.
Also the hey one tag all these ones are children of the body.
So the indentation in the kids who are the parent.
It's all right.
The metzer tag basically are used for information purposes.
This may be a car set here.
Basically they've indicated to allow tribute and the value is utf 8 utf dash.
It basically is the standard Unicode standards or the characters that we're going to use are going to
be readable by most or web browser.
So this utf is a standard code that is title here and because the title.
So in case there's title always show up when the web page is launched they made a name here.
Again there's some other attribute where you can specify the value of description way.
And there is two tag two attributes here.
One is the name for this metal tag.
It values description and then there's another idea here called content.
The value is the name of my app or what app does.
So it's useful for these search engines because someone is looking for an app that does something like
that that will guide them to this page.
The tag on line 7 here is called value an attribute of name and value of viewport is basically enables
this page to be viewed by any device either a mobile device or a tablet regardless of the screen size.
It will adapt to fit that screen size.
That's basically what this is.
And the content here again the with equal to device minus who with.
And then this is the initial desco.
So did is zoom.
How you can zoom so Danishes one starts with one and then you can zoom to skill to your relevant screen
size and physically.
That's what this is.
Okay so that without the Line 7 it would be difficult to view this page on any device so you can only
probably views on a standard screen.
But with this it will adapt to any screen size that is used to view this speech line.
Here is just a link to the style sheet I'll use in wishes.
This style sheet here.
So that's just a reference to the link.
So that's the end of the ed section.
Then let's move over to the body section.
This is a body section here.
Any content in the body section is the only content that you can see or visitors can see when they visit
the page.
So the visible content of a web page is inside the in between the body inside the body tag hive's specifies
some child elements here.
So child tags here one tag basically is ahead in tag.
And this is a text who will show up the tag and then I've got an input tag.
This given it an idea.
Here it is Heidi.
I will use later for styling the value of the idea here is acor which is short for four string.
And then I want the value inside that this input will be given the value of blanks or not two be today
if I won it all the included text How pleased that in between those quotes.
Here I want it to be blank.
So I have just left the quotes there and then the type is say text texel what I want to going here is
this text as well specified here.
I have created another Deve here which will act as an output so whatever is typed in here will output
to the deep here and given the Deve idea of the value output.
So did leave here.
Well sure the output has been imported inside this inside this input box here.
I have also created a button on line 17 so this is how you create a button.
Given the button an A D equals two but b t n no d attributes always have to have their values in quotes.
In between the button tag I added a wish to tag to display the text that the button will display and
then I have closed the button tag.
There are right to notice I've embedded two separate tags in one here.
And notice how I have closed them properly.
Have close the page to first here before closing the button because the button came first and then the
script followed the script just before duclos embody tag.
It's always good to insert your script there so that they be fully lohse before your script is executed.
All right so this javascript here this is where it will reference it from.
So that's it for our app structure.
This is the dock.
This is the code to create the app structure so I just click on saved to make sure it is say click save
all or DAS the structure of the app.
That's it for this year.
Thank you so much.
Take care.
Bye for now.
Any questions please do not hesitate to ask.
I'll be more than happy to help.